<template>
  <div>
    <el-row>
      <el-col :span="15">
        <el-form>
          <el-form-item label="时间范围：">
            <el-select v-model="timeRange" placeholder="时间范围">
              <el-option label="30秒" value="30"></el-option>
              <el-option label="60秒" value="60"></el-option>
              <el-option label="120秒" value="120"></el-option>
              <el-option label="180秒" value="180"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <LineChart :option="option" :style="chartStyle"></LineChart>
    <el-row>
      <el-col :span="4" v-for="(item, index) in option.series" :key="index">
        <el-text size="default" :style="{color: gColors[index]}">{{ item.name }} : {{ getNowDot(item.data)}}</el-text>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {computed, onBeforeMount, onBeforeUnmount, ref, watch} from 'vue';
import LineChart from '@/components/Charts/LineChartX.vue'
import { useWsStore } from '@/stores/ws-module'
import {initTm} from "@/api/wsObj.js";

const chartStyle = {'height': '600px'}

const option = ref({
  backgroundColor: 'rgba(14, 14, 18, 0.8)',
  legend: {
    orient: 'vertical',
    right: 'right',
    textStyle: {
      color: '#9b9595'
    },
    data: []
  },
  grid: {
    top: 70,
    left: 40,
    right: 200,
    bottom: 50
  },
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    splitLine: {
      show: false
    }
  },
  yAxis: {
    type: 'value',
    splitLine: {
      show: false
    }
  },
  series: []
});
const gColors = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272']
const curSeqArr = ref([])
const timeRange = ref('120')
const wsStore = useWsStore()
const tmObj = computed(() => wsStore['tm'])
let wsObj = ref(null)
let intervalId = null

// watch(tmObj.value, () => {
//   // getTmData()
// })

onBeforeMount(() => {
  wsObj = initTm()
  initChart()
})
onBeforeUnmount(() => {
  wsObj?.disconnect()
  clearInterval(intervalId)
})

const initChart = () => {
  getPassSeq()
  generateOption()
  getTmData()
  intervalId = setInterval(() => {
    getTmData()
   }, 1000)
}
const getPassSeq = () => {
  const curHref = window.location.href
  let params = curHref.split("?seq=")[1]
  if(params !== '') {
    curSeqArr.value = params.split(",")
  }
}
const generateOption = () => {
  curSeqArr.value.forEach(item => {
    option.value.series.push(
        {
          data: [],
          type: 'line',
          smooth: true,
          showSymbol: true,
          name: '',
          // endLabel: {
          //   show: true,
          //       formatter: function (params) {
          //         return params.seriesName + ':' + params.value[1];
          //       }
          // }
        }
    )
  })
}
const getTmData = () => {
  //获取所有的tmname
  //option.series中push一个tm的data，type和smooth
  for(let i = 0; i < curSeqArr.value.length; i++) {
    const item = curSeqArr.value[i]
    const v = tmObj.value[item]?.valuedb
    //Object.assign(this.curVDict, { [item]: v })
    const now = new Date().toLocaleTimeString()

    if( option.value.series[i].data.length >= timeRange.value ) {
      option.value.series[i].data.shift()
    }

    option.value.series[i].data?.push([now, v])
    const desc = tmObj.value[item]?.description
    const name = `${item}(${desc})`
    option.value.series[i].name = name
    option.value.legend.data.push(name)

  }
}
const getNowDot = (dataArr) => {
  return dataArr.at(-1)[1]
}
</script>

<style lang="scss" scoped>
#car-chart-div {
  height: 200px;
}
</style>